<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="radarChart" style="width: 1200px;height: 1200px;background-color: #FEFDEB"></div>
    <script type="text/javascript">
        var dom = document.getElementById("radarChart");
        var myChart = echarts.init(dom);
        // iOS传递的数据
        function setData(indicatorData, seriesData) {
            var option = {
                radar: {
                    indicator: indicatorData,
                    axisName: {
                        formatter: function(value, indicator) {
                          const name = indicator.description
                          return `{a|${name}}`
                        },
                        rich: {
                          a: {
                            color: '#C06B54',
                            fontSize: 50,
                            padding: [20, 20, 20, 20],
                            backgroundColor: '#fff',
                            borderRadius : 10,
                          },
                          
                        },
                        textStyle: {
                          color: '#fff'
                        }           
                    },
                    splitLine: {
                        lineStyle: {
                          color: [
                            '#fff',
                            '#fff',
                            '#fff',
                            '#fff',
                            '#fff',
                            '#ABDC9E'
                          ]
                        }
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 0)'] // 设置背景区域为透明
                        }
                    },
                    
                },
                series: [{
                    type: 'radar',
                    emphasis: {
                        lineStyle: {
                            width: 4
                        }
                    },
                    itemStyle: {
                        // 设置连接线不可见
                        color: '#63FA5D'
                    },
                    data: [
                        {
                            value: seriesData,
                            name: 'Series Name',
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(42, 165, 216, 0.6)' // 渐变色起始颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(64, 246, 166, 0.6)' // 渐变色结束颜色
                                }], false)
                            },
                            borderColor: '63FA5D', // 边框颜色
                            borderWidth: 1 // 边框宽度
                        },
                        
                           
                    ]
                }],
                backgroundColor: 'rgba(0, 0, 0, 0)' // 设置整个图表的背景色为透明
            };
            myChart.setOption(option);
        }
                
    </script>
</body>
<style>
    body {
        background-color: #FEFDEB;
    }
</style>
</html>
